<template>
  <div>
    <header-top title="请假详情" >
      <div @click="back()" class="back" slot="back"></div>
    </header-top>
    <div style="background: #f8f8f8" class="contentF clearfix">
      <div  class="leaveTop clearfix">
        <div class="leaveTitle">
          <h3>{{leave.studentName}}的{{leave.leaveTitle}}</h3>
          <p><span>{{leave.gradeName + leave.className}}</span><span>{{leave.createTime.slice(0,16)}}</span></p>
        </div>
        <div class="leaveIcon" v-html="Text(leave.status)">
          <p class="timeoutD" ></p>
        </div>
      </div>
      <table class="Table">
        <thead>
          <tr>
            <td width="28%">请假类型:</td>
            <td width="72%">{{leave.leaveTitle}}</td>
          </tr>
          <tr>
            <td>请假事由:</td>
            <td>{{leave.leaveReason}}</td>
          </tr>
          <tr>
            <td>起始时间:</td>
            <td>{{leave.leaveBeginTime.slice(0,16)}} </td>
          </tr>
          <tr>
            <td>结束时间:</td>
            <td>{{leave.leaveEndTime.slice(0,16)}} </td>
          </tr>
          <tr>
            <td>申请人:</td>
            <td>{{leave.createUserName}}</td>
          </tr>
          <tr>
            <td>回复人:</td>
            <td>{{leave.teacherName}}</td>
          </tr>
        </thead>
      </table>
      <textarea :readonly=readonly placeholder="回复内容" class="textarea" v-model="remarks">

      </textarea>

    <div v-if="!readonly" class="bottomBut" @click="sub">保存</div>

    </div>
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import {reqLeave,reqSetLeave} from "@/api";
  import { Toast } from 'vant';   //使用消息提示

  export default {
    name: "leaveDetail",
    data(){
      return{
        params:null,
        leave:null,
        remarks:null,
        readonly:null,


      }
    },
    components:{
      headerTop:headerTop,
    },
    async mounted() {
      //获取路由传入参数
      this.params =  this.$route.query
      let leave = await reqLeave(this.params.leaveId)
      this.leave = leave.data[0]
      this.remarks = this.leave.remarks
      if(this.leave.status == "REPLYED"  || this.leave.status == "TIMEOUT"){
        this.readonly = 'readonly'
      }

    },
    methods:{
      back(){
        this.$router.replace({path:'/class/leave'})
      },
      Text(type){
        let text = null
        let status = null
        if(type == 'PROCESSED'){
          text = '已查看'
          status = 'processedD'
        }else if(type == 'TIMEOUT'){
          text = '已超时'
          status = 'timeoutD'
        }else if(type == 'REPLYED'){
          text = '已回复'
          status = 'replyedD'
        }else if(type == 'PROCESSING'){
          text = '待处理'
          status = 'processingD'
        }
        return '<p class="' + status + '">' + text + ' </p>'
      },
      async sub(){
        if(this.remarks){
         let set = await reqSetLeave(this.params.leaveId,this.remarks)
          Toast(set.message)
          let leave = await reqLeave(this.params.leaveId)
          this.leave = leave.data[0]
          this.readonly = 'readonly'

        }else{
          Toast("请输入回复内容")
        }
      }
    }
  }
</script>

<style scoped>
  .Table{ font-size: 1.1rem; text-align: left; background: #fff;  }
  .Table tr{ border-bottom:1px solid #f8f8f8; line-height: 1.8rem;  }
  .Table td{ padding: 1rem; vertical-align: top;}
  .textarea{ width: 100%; height: 8.6rem;  padding: 1rem; margin-top: 0.5rem; border: none; font-size: 1.1rem; line-height: 1.8rem;}
  .leaveTop{ background: #fff; margin: 0.5rem 0; padding: 1.4rem 1rem;}
  .leaveTitle{width: 20rem; float: left;}
  .leaveTitle h3{font-size: 1.1rem; height: 1.1rem; line-height: 1.1rem;
    margin-bottom: 0.8rem; font-weight: normal;}
  .leaveTitle p {height: 0.9rem; line-height: 0.9rem;}
  .leaveTitle span{ display: block; height: 0.9rem; font-size: 0.9rem; line-height: 0.9rem; margin-right: 1rem; color: #666; float: left;}
  .leaveIcon { width: 3rem; height:2.8rem; float: right;}
</style>
